<template>
  <div class="drawer">
    <div :class="maskClass" @click="closeByMask" />
    <div :class="mainClass" :style="mainStyle" class="main">
      <div class="drawer-head">
        <span>{{ title }}</span>
        <span class="span-add" @click="toList">查看全部 ></span>
        <span v-show="closable" class="el-icon-close" @click="closeByButton" />
      </div>
      <div class="drawer-body">
        <el-collapse v-model="aName" accordion @change="changeHandle">
          <el-collapse-item name="1open" class="itemTitle collapse">
            <template slot="title">
              <span>今天({{ todayNum }})</span>
            </template>
            <div
              v-for="(item1, index) in mainList[0]"
              :key="index"
              class="bottom-line"
            >
              <a
                v-if="item1.type != null && item1.businessId != null"
                class="transition-box"
                @click="detail(item1.type, item1.businessId)"
                >{{ item1.content }}</a
              >
              <div
                v-else
                class="transition-box"
                @click="detail(item1.type, item1.businessId)"
              >
                {{ item1.content }}
              </div>
              <div class="transition-box">
                <span> {{ timeFormat(item1.createdTime) }} </span>
                <span> {{ item1.sender }} </span>
                <span>{{ item1.receiver }} </span>
              </div>
              <div class="box">
                <el-button type="info" @click="processedBtn(item1.id, 1, index)"
                  >已处理</el-button
                >
                <el-button type="info" @click="next(item1.id, 1)">
                  下次提醒
                </el-button>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2open" class="itemTitle collapse">
            <template slot="title">
              <span>明天({{ tomorrowNum }})</span>
            </template>
            <div
              v-for="(item2, index) in mainList[1]"
              :key="index"
              class="bottom-line"
            >
              <a
                v-if="item2.type != null && item2.businessId != null"
                class="transition-box"
                @click="detail(item2.type, item2.businessId)"
                >{{ item2.content }}</a
              >
              <div
                v-else
                class="transition-box"
                @click="detail(item2.type, item2.businessId)"
              >
                {{ item2.content }}
              </div>

              <div class="transition-box">
                <span> {{ timeFormat(item2.createdTime) }} </span>
                <span> {{ item2.sender }} </span>
                <span>{{ item2.receiver }} </span>
              </div>
              <div class="box">
                <el-button type="info" @click="processedBtn(item2.id, 2, index)"
                  >已处理</el-button
                >
                <el-button type="info" @click="next(item2.id, 2)"
                  >下次提醒</el-button
                >
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3open" class="itemTitle collapse">
            <template slot="title">
              <span>本周({{ weekNum }})</span>
            </template>
            <div
              v-for="(item3, index) in mainList[2]"
              :key="index"
              class="bottom-line"
            >
              <a
                v-if="item3.type != null && item3.businessId != null"
                class="transition-box"
                @click="detail(item3.type, item3.businessId)"
                >{{ item3.content }}</a
              >
              <div
                v-else
                class="transition-box"
                @click="detail(item3.type, item3.businessId)"
              >
                {{ item3.content }}
              </div>

              <div class="transition-box">
                <span> {{ timeFormat(item3.createdTime) }} </span>
                <span> {{ item3.sender }} </span>
                <span>{{ item3.receiver }} </span>
              </div>
              <div class="box">
                <el-button type="info" @click="processedBtn(item3.id, 3, index)"
                  >已处理</el-button
                >
                <el-button type="info" @click="next(item3.id, 3)"
                  >下次提醒</el-button
                >
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4open" class="itemTitle collapse">
            <template slot="title">
              <span>已逾期({{ overdueNum }})</span>
            </template>
            <div
              v-for="(item4, index) in mainList[3]"
              :key="index"
              class="bottom-line"
            >
              <a
                v-if="item4.type != null && item4.businessId != null"
                class="transition-box"
                @click="detail(item4.type, item4.businessId)"
                >{{ item4.content }}</a
              >
              <div
                v-else
                class="transition-box"
                @click="detail(item4.type, item4.businessId)"
              >
                {{ item4.content }}
              </div>
              <div class="transition-box">
                <span> {{ timeFormat(item4.createdTime) }} </span>
                <span> {{ item4.sender }} </span>
                <span>{{ item4.receiver }} </span>
              </div>
              <div class="box">
                <el-button type="info" @click="processedBtn(item4.id, 4, index)"
                  >已处理</el-button
                >
                <el-button type="info" @click="next(item4.id, 4)"
                  >下次提醒</el-button
                >
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <slot />
      </div>
    </div>
    <myModal
      :obj="objFour"
      :disabled="remindDateDisabled"
      @save="save"
      @close="clearForm"
    >
      <el-form
        v-if="objFour.show"
        ref="form"
        :model="nextForm"
        label-width="130px"
        :rules="rules"
        class="formDiv"
      >
        <el-form-item label="下次提醒时间：" prop="remindDate">
          <el-date-picker
            v-model="nextForm.remindDate"
            type="date"
            placeholder="请选择时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
    </myModal>
  </div>
</template>

<script>
import { getNumber, nextReminder, processed, getTypeList } from "@/api/message";
import myModal from "@/components/Modal";
import { timeFormat } from "@/utils/common";
export default {
  components: { myModal },
  props: {
    // 是否打开
    display: {
      type: Boolean,
    },

    // 标题
    title: {
      type: String,
      default: "标题",
    },

    // 是否显示关闭按钮
    closable: {
      type: Boolean,
      default: true,
    },

    // 是否显示遮罩
    mask: {
      type: Boolean,
      default: true,
    },

    // 是否点击遮罩关闭
    maskClosable: {
      type: Boolean,
      default: true,
    },

    // 宽度
    width: {
      type: String,
      default: "400px",
    },

    // 是否在父级元素中打开
    inner: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      aName: "1open",
      timeFormat,
      todayNum: 0,
      tomorrowNum: 0,
      weekNum: 0,
      overdueNum: 0,
      openVal: 0,
      mainList: [[], [], [], []],
      objFour: {
        show: false,
        title: "选择下次提醒时间",
        width: "647px",
      },
      remindDateDisabled: true,
      nextForm: {
        id: "",
        remindDate: "",
      },
      rules: {
        remindDate: [{ required: true, message: "下次提醒时间不能为空" }],
      },
    };
  },
  computed: {
    show() {
      return this.display && !this.$store.state.app.closeMsg;
    },
    maskClass: function () {
      return {
        "mask-show": this.mask && this.show,
        "mask-hide": !(this.mask && this.show),
        inner: this.inner,
      };
    },
    mainClass: function () {
      return {
        "main-show": this.show,
        "main-hide": !this.show,
        inner: this.inner,
      };
    },
    mainStyle: function () {
      return {
        width: this.width,
        right: this.show ? "0" : `-${this.width}`,
        borderLeft: this.mask ? "none" : "1px solid #eee",
      };
    },
    userID() {
      return this.$store.state.user.id;
    },
  },
  watch: {
    nextForm: {
      handler(newVal, oldVal) {
        var time = new Date();
        if (newVal.remindDate > time) {
          this.remindDateDisabled = false;
        } else {
          this.remindDateDisabled = true;
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (this.inner) {
      const box = this.$el.parentNode;
      box.style.position = "relative";
    }
    this.$root.$on("changeCount", () => {
      this.getMessage();
    });
  },
  created() {
    this.getMessage();
    this.changeHandle();
  },
  methods: {
    async getMessage() {
      var res = await getNumber();
      if (res.code === 200) {
        this.todayNum = res.data.todayNum;
        this.tomorrowNum = res.data.tomorrowNum;
        this.weekNum = res.data.weekNum;
        this.overdueNum = res.data.overdueNum;
      }
      const resData = await getTypeList(1 - 1);
      this.$set(this.mainList, 1 - 1, resData.data);
    },
    async changeHandle(val, noCheck) {
      val = parseFloat(val);
      if ((val < 0 || this.mainList[val - 1].length) && !noCheck) return;
      const res = await getTypeList(val - 1);
      this.$set(this.mainList, val - 1, res.data);
    },
    next(id, val) {
      this.openVal = val;
      this.nextForm.id = id;
      this.objFour.show = true;
    },
    detail(type, businessId) {
      console.log("type:", type);
      console.log("businessId:", businessId);
      if (type === 1 || type === 2 || type === 9) {
        // 租房
        this.$router.push({
          path: "/house/leasepageProcess",
          query: { id: businessId, isDetail: true },
        });
      } else if (type === 3) {
        // 售房流程
        this.$router.push({ path: "salesProcess", query: { businessId } });
      } else if (type === 10) {
        // 交接-闲置房源
        this.$router.push({
          path: "/house/pageProcess",
          query: { businessId },
        });
      } else if (type === 11) {
        // 交接-在房源
        this.$router.push({
          path: "/house/regroup",
          query: { businessId },
        });
      } else if (type === 12) {
        // 交接-未交割房源
        this.$router.push({
          path: "/house/pageProcess",
          query: { businessId },
        });
      }
    },
    async save() {
      await nextReminder(this.nextForm);
      this.objFour.show = false;
      await this.changeHandle(this.openVal, true);
      this.getMessage();
    },
    async processedBtn(id, val, index) {
      const _list = this.mainList[val - 1];
      _list.splice(index, 1);
      await processed(id);
      this.$set(this.mainList, val - 1, _list);
      if (val === 1) {
        this.todayNum -= 1;
      }
      if (val === 2) {
        this.tomorrowNum -= 1;
      }
      if (val === 3) {
        this.weekNum -= 1;
      }
      if (val === 4) {
        this.overdueNum -= 1;
      }

      this.$store.dispatch("message/getMsg", this.userID);
      await this.changeHandle(val, true);

      // this.getMessage();
    },
    clearForm() {
      this.nextForm.remindDate = "";
    },
    toList() {
      this.$router.push("/message");
      this.$emit("update:display", false);
    },
    closeByMask() {
      this.maskClosable && this.$emit("update:display", false);
    },
    closeByButton() {
      this.$emit("update:display", false);
    },
  },
};
</script>

<style lang="scss">
.el-collapse-item__header {
  background-color: #a8a8a8;
  border-bottom: 1px solid #bbbbbb;
  color: #ffffff;
  // max-height: 900px;
}
.el-collapse-item__content {
  background-color: #a8a8a8;
  height: 400px;
  overflow-x: hidden;
  font-size: 14px;
}
.el-collapse {
  border: 0;
}
</style>

<style lang="scss" scoped>
.formDiv {
  padding: 0 20px;
}
.bottom-line {
  padding-bottom: 15px;
  border-bottom: 1px solid #bbb;
  line-height: 10px;
}
.span-add {
  padding-right: 357px;
  font-size: 14px;
  cursor: pointer;
}
.drawer {
  /* 遮罩 */
  .mask-show {
    position: absolute;
    top: 75px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #eeeeee;
    opacity: 1;
    transition: opacity 0.5s;
  }
  .mask-hide {
    opacity: 0;
    transition: opacity 0.5s;
  }

  /* 滑块 */
  .main {
    position: absolute;
    z-index: 10;
    top: 75px;
    height: 100%;
    background: #a8a8a8;
    transition: all 0.5s;
  }
  .main-show {
    opacity: 1;
  }
  .main-hide {
    opacity: 0;
  }

  /* 某个元素内部显示 */
  .inner {
    position: absolute;
  }

  /* 其他样式 */
  .drawer-head {
    display: flex;
    justify-content: space-between;
    height: 45px;
    line-height: 45px;
    padding: 0px 15px;
    font-size: 20px;
    // font-weight: 100;
    font-family: SourceHanSansSC-regular;
    color: #ffffff;
    // border-bottom: 1px solid #eee;
    .el-icon-close {
      display: inline-block;
      cursor: pointer;
      height: 100%;
      padding-left: 20px;
      padding-top: 8px;
      font-size: 36px;
      font-family: SourceHanSansSC-bold;
    }
  }
  .drawer-body {
    font-size: 14px;
    padding: 15px;
  }
  .box {
    padding-left: 345px;
    padding-top: 10px;
  }
  .transition-box {
    padding-top: 10px;
    word-break: break-all;
    width: 530px;
    line-height: 25px;
  }
}
</style>
